<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <focus></focus>
    <grid class="grid">
      <grid-item label="优品.游" link="/tickets">
        <i slot="icon" class="iconfont icon-jingdian"></i>
      </grid-item>
      <grid-item label="优品.购" link="/products">
        <i slot="icon" class="iconfont icon-dianjitaishangcheng1"></i>
      </grid-item>
      <grid-item label="积分兑换" link="/promotions/integral">
        <i slot="icon" class="iconfont icon-pig"></i>
      </grid-item>
      <grid-item label="在线客服" @click.native="jump(qq)">
        <i slot="icon" class="iconfont icon-zaixianzixun-"></i>
      </grid-item>
    </grid>
    <div class="ximg-box" v-if="ads && ads.big">
      <x-img :src="$apiUrl+'/storage/'+ads.big.body" class="ximg" :offset="-100"  @click.native="jump(ads.big.url)"></x-img>
    </div>
    <div v-if="hot.length > 0">
      <div class="title">
        热销商品 
        <span>HOT</span>
      </div>
      <div class="hot-box">
        <scroller lock-y :scrollbar-x="false">
          <div class="hot" :style="{ width: hot.length * 110 + 'px' }">
            <img :src="item.thumb_img" alt="" v-for="(item, index) in hot" :key="index" @click="$router.push('/products/'+item.id)">
          </div>
        </scroller>
      </div>
    </div>
    <div class="gutter"></div>
    <div class="title">
      活动专区 
      <span>PROMOTION</span>
    </div>
    <grid :cols="2" class="promotion-entry" v-if="ads && ads.activities.length > 0">
      <grid-item v-for="(item, index) in ads.activities" :key="index" >
        <img :src="$apiUrl + '/storage/' + item.body" @click="jump(item.url)">
      </grid-item>
    </grid>

    <div class="ximg-box" v-if="ads && ads.f1" style="margin-top: 10px;">
      <img :src="$apiUrl+'/storage/'+ads.f1.body" class="ximg"  @click="jump(ads.f1.url)">
    </div>

    <div v-if="tickets.length > 0">
      <row v-for="(product, index) in tickets" :key="index" :product="product"></row>
    </div>
    
   <div class="ximg-box" v-if="ads && ads.f2" style="margin-top: 10px;">
      <img :src="$apiUrl+'/storage/'+ads.f2.body" class="ximg"  @click="jump(ads.f2.url)">
    </div>
    <div v-if="products.length > 0">
      <row v-for="(product, index) in products" :key="index" :product="product"></row>
    </div>
    <div class="ximg-box" v-if="ads && ads.f3" style="margin-top: 10px;">
      <img :src="$apiUrl+'/storage/'+ads.f3.body" class="ximg"  @click="jump(ads.f3.url)">
    </div>
    <div v-if="ypgs.length > 0">
      <row v-for="(product, index) in ypgs" :key="index" :product="product"></row>
    </div>
    <footer-bar  slot="bottom" selected="home"></footer-bar>
    <coupon></coupon>
  </view-box>
</template>
<script>
import { Grid, GridItem, XImg, Divider, XButton, ViewBox, Scroller } from 'vux'
import Row from '../product/components/Row'
import Focus from './components/Focus'
import FooterBar from '../components/FooterBar'
import Coupon from './components/Coupon'
import { QQ_KEFU_URL } from '@/config'
export default {
  name: 'home',
  data () {
    return {
      qq: QQ_KEFU_URL,
      ads: null,
      hot: [],
      tickets: [],
      ypgs: [],
      products: []
    }
  },
  components: {
    Scroller,
    Grid,
    GridItem,
    XImg,
    Divider,
    XButton,
    Row,
    ViewBox,
    FooterBar,
    Coupon,
    Focus
  },
  mounted () {
    this._getAds()
    this._getHot()
    this._getTickets()
    this._getProducts()
    this._getYpgs()
  },
  methods: {
    jump (url) {
      if (url) {
        location.href = url
      }
    },
    _getAds () {
      this.$http.get('/ads/home').then((response) => {
        this.ads = response.data
      }).catch((error) => {
        console.log(error)
      })
    },
    _getHot () {
      this.$http.get('/goods?is_on_sale_1&order_type=desc&order_by=start_sales_count&page_size=10').then((response) => {
        this.hot = response.data.data
      }).catch((error) => {
        console.log(error)
      })
    },
    _getTickets () {
      this.$http.get('/goods?is_on_sale_1&column=ypy&order_type=asc&order_by=order&page_size=5').then((response) => {
        this.tickets = response.data.data
      }).catch((error) => {
        console.log(error)
      })
    },
    _getYpgs () {
      this.$http.get('/goods?is_on_sale_1&category_id=14&order_type=asc&order_by=order&page_size=5').then((response) => {
        this.ypgs = response.data.data
      }).catch((error) => {
        console.log(error)
      })
    },
    _getProducts () {
      this.$http.get('/goods?is_on_sale_1&column=ypg&order_type=asc&order_by=order&page_size=5').then((response) => {
        this.products = response.data.data
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped lang="less">
  .grid .weui-grid {
    color: @tabbar-text-active-color;
  }
  .grid .weui-grid:after {
    border: none;
  }
  .grid .weui-grid:before {
    border: none;
  }
  .grid i{
    font-size: 25px;
    line-height: 25px;
  }
  .ximg-box {
    width: 100%;
    overflow: hidden;
  }
  .ximg {
    width: 100%;
  }
  .title {
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .title span {
    font-size: 14px;
    font-weight: normal;
  }
  .flex-box {
    display: flex;
    padding: 0 20px;
    justify-content:space-between;
  }
  .hot-box {
    padding: 0 10px 20px;
  }
   .hot{
    position: relative;
    border-radius: 5px;
  }
  .hot img {
    display: inline-block;
    width: 100px;
    padding-left: 10px;
  }
  .hot img:first-child {
    padding-left: 0;
  }
  .flex-box .item {
    width: 22%;
  }
  .flex-box .item img {
    width: 100%;
    height: 70px;
  }
  .flex-box .item p {
    width: 100%;
    overflow: hidden;/*内容超出后隐藏*/
    text-overflow: ellipsis;/* 超出内容显示为省略号*/
    white-space: nowrap;/*文本不进行换行*/
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    text-align: center;
  }
  .flex-box .item p.price {
    font-size: 14px;
    height: 16px;
    line-height: 18px;
    color: @tabbar-text-active-color;
  }
  .promotion-title {
    padding: 0 20px 10px 20px;
    height: 16px; 
    line-height: 16px;
    color: @tabbar-text-active-color;
  }
  .promotion-title h3{
    float: left;
    font-weight: normal;
    font-size: 16px;
  }
  .promotion-title h3 span {
    color: #717171;
    font-size: 12px;
    padding-left: 10px;
  }
  .promotion-title span {
    float: right;
    font-size: 14px;
    text-decoration: underline;
  }
  .promotion-entry {
    // margin-top: 20px;
  }
  .promotion-entry img {
    width: 100%; 
  }
  .promotion-entry .weui-grid {
    padding: 10px;
}
  .ximg-box-padding {
    height: 66px;
    padding: 10px;
    overflow: hidden;
  }
  .ximg-box-padding img {
    border-radius: 2px;
    height: 66px;
    width: 100%;
  }
  div.gutter {
    height: 6px;
    background: #EEEEEE;
  }
</style>